<template>
    <!-- 巡检日志详情 -->
    <div style="padding: 20px;">
        <el-descriptions title="日常巡检计划">
            <el-descriptions-item label="巡检人员">{{ getRecordForm.inspectionUserName }}</el-descriptions-item>
            <el-descriptions-item label="巡检签到时间">{{ getRecordForm.start_time }}</el-descriptions-item>
            <!-- <el-descriptions-item label="巡检签到位置">{{ getRecordForm.signInAddr }}</el-descriptions-item> -->
            <el-descriptions-item label="巡检签退时间">{{ getRecordForm.end_time }}</el-descriptions-item>
            <!-- <el-descriptions-item label="巡检签退位置">{{ getRecordForm.signOutAddr }}</el-descriptions-item> -->
        </el-descriptions>
        <div class="prescription_warp">
            <div class="prescription_line"></div>
            <div class="prescription_text">巡检点位</div>
        </div>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item :key="index" v-for="(item, index) of isData" :title="item.inspectionContent"
                :name="item.inspectionId">
                <el-row>
                    <el-col :span="12">
                        <div>现场图片</div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <image-preview style="margin: 5px;" :key="index" v-for="(item, index) of item.sceneImgs"
                                :src="item" :width="120" :height="120"></image-preview>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>巡检情况：{{ item.inspectionContent }}</div>
                        <div>巡检隐患：{{ item.pitfall == 'Y' ? '有隐患' : '无隐患' }}</div>
                        <div>巡检位置：{{ item.signInAddr }}</div>
                    </el-col>
                </el-row>
                <el-row v-if="item.pitfall == 'Y'">
                    <el-col :span="12">
                        <div>隐患图片</div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <image-preview style="margin: 5px;" :key="index"
                                v-for="(item, index) of item.pitfallCorrectionImgs" :src="item" :width="120"
                                :height="120"></image-preview>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>隐患情况：{{ item.pitfallCorrectionContent }}</div>
                        <div>隐患处理：{{ item.pitfallCorrection == "Y" ? '已整改' : '未整改' }}</div>
                    </el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { inspectionPlanRecordId } from "@/api/site/isRecord";
export default {
    data() {
        return {
            activeName: '',
            isData: [],
            getRecordForm: {}
        };
    },
    created() {
        this.getInfo();
    },
    methods: {
        getInfo() {
            inspectionPlanRecordId({ inspectionId: this.$route.query.id }).then((res) => {
                this.getRecordForm = res.rows[0]
                this.isData = this.getRecordForm.recordList
                for (let item of this.isData) {
                    item.sceneImgs = item.sceneImgs ? item.sceneImgs.split(',') : []
                    item.pitfallCorrectionImgs = item.pitfallCorrectionImgs ? item.pitfallCorrectionImgs.split(',') : []
                }
            })
        }
    }
};
</script>
<style lang="scss">
.prescription_warp {
    display: flex;
    margin: 10px 0;

    .prescription_line {
        width: 4px;
        height: 16px;
        background: #409EFF;

    }

    .prescription_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #2F2F2F;
        line-height: 16px;
        margin-left: 5px;
    }

}
</style>